<!--
  待办事项-项目设备审批

  props：
    title string 标题
    submitter string 提交人
    time string 提交时间
    status boolean(已审批 ｜ 待审批) 审批状态
-->
<template>
  <div class="agency-card">
    <f7-card class="agency-box">
      <f7-card-content class="agency-content">
        <f7-list>
          <f7-list-item  :header="title">
            <div slot="title">
              <span style="margin-right: 10%">{{submitter}}</span>
              <span>{{time}}</span>
            </div>
            <template #after>
              <div class="logo" :style="{backgroundColor: logoBgColor}">{{status ? "已审批" : "待审批"}}</div>
            </template>
          </f7-list-item>
        </f7-list>
      </f7-card-content>
    </f7-card>
  </div>
</template>

<script>
export default {
  name: "qm-agency-card",
  props: {
    title: {
      type: String,
      default: "关于项目设备使用的审批…"
    },
    submitter: {
      type: String,
      default: "张羽凡"
    },
    time: {
      type: String,
      default: "2021/09/30"
    },
    status: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    logoBgColor() {
      return this.status ? "#3385FF" : "#FFA029"
    }
  }
}
</script>

<style lang="less" scoped>
.agency-card {
  margin-bottom: calc(20px * var(--ratio));
  &:last-child {
    margin-bottom: 0;
  }
}
.agency-box {
  margin: 0;
  background: #FFFFFF;
  box-shadow: 0 calc(6px * var(--ratio)) calc(14px * var(--ratio)) 0 rgba(0, 0, 0, 0.05);
  border-radius: calc(16px * var(--ratio));

  .agency-content {
    padding: calc(32px * var(--ratio)) calc(24px * var(--ratio));

    ::v-deep .list {
      margin: 0;
      .item-content {
        padding: 0;

        .item-inner {
          padding: 0;
          color: #8998AC;
          font-size: var(---font-size-subcontent-2);

          .item-header {
            margin-bottom: calc(20px * var(--ratio));
            font-size: var(--font-size-subtitle);
            color: #242424;
            font-weight: 500;
          }
        }
      }
    }

    .logo {
      width: calc(110px * var(--ratio));
      height: calc(40px * var(--ratio));
      font-size: var(--font-size-subcontent-2);
      color: #fff;
      text-align: center;
      line-height: calc(40px * var(--ratio));
      background: var(--color-brand);
      // clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
      clip-path: path("M4.773206415,0 L52.671238,0 C53.7758075,1.573450715e-15 54.671238,0.8954305 54.671238,2 C54.671238,2.10111875 54.6635695,2.20209189 54.648298,2.302050795 L52.2038535,18.3020508 C52.0546505,19.2786526 51.214727,20 50.2267935,20 L2.32876197,20 C1.22419247,20 0.3287619705,19.1045695 0.3287619705,18 C0.3287619705,17.89888125 0.336430706,17.7979081 0.351702205,17.6979492 L2.79614665,1.697949205 C2.9453497,0.721347425 3.78527292,1.51374807e-15 4.773206415,0 Z");
    }
  }
}
</style>
